<template>
	<!-- 选择优惠卷 -->
	<view class="container">
		<view class="item" v-for="(item,index) in info" :key="item.index">
			<view class="title">
				优惠券
			</view>
			<view class="nums">
				×1
			</view>
			<view class="price">
				￥{{item.coupon.moeny}}元优惠券
			</view>
			<view class="time">
				活动时间至<br />{{item.coupon.end_at}}
			</view>
			<view class="threshold" v-if="item.coupon.full!=0.00">
				满{{item.coupon.full}}可用
			</view>
			<view class="threshold" v-if="item.coupon.full==0.00">
				无门槛抵用券
			</view>
			<view class="btn" @tap="changeList(index)" :class="{active:index==n}">
				<view class="text" v-if="index==n">
					已选择
				</view>
				<view class="text" v-if="index!=n">
					立即使用
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btn: '立即使用',
				cities: ["50元优惠券", "10元优惠券", "20元优惠券", "100元优惠券", "30元优惠券"],
				n: -1,
				info:[],
				isloding:false
			};
		},
		onLoad(e) {
			console.log(e.prepayment*1)
			let prepayment=e.prepayment*1
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			uni.request({
				url: this.webUrl+'/user/job/coupon',
				method: 'GET',
				header:{
					token:e.token
				},
				data: {
					prepayment:parseFloat(prepayment),
					page:1
				},
				success: res => {
					console.log(res)
					uni.hideLoading()
					this.isloding=true
					if(res.data.code==0){
						this.info=res.data.data
						if(this.info.length==0){
							uni.showToast({
								title: '暂无可用优惠券',
								icon:'none',
								duration:2000
							});
						}
					}else if(res.data.code==3){
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration:2000
						});
					}else{
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
			changeList(index) {
				if(this.n==index){
					this.n=-1
				}else{
					this.n = index;
					uni.showToast({
						title: '已选择',
						icon:'none',
						duration:800
					});
					let pages = getCurrentPages();
					let prevPage = pages[ pages.length - 2 ]; 
					prevPage.$vm.Coupon=this.info[index].coupon.moeny+'元优惠卷'
					prevPage.$vm.coupon_id=this.info[index].coupon.id
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 1000);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: absolute;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		background: #F2F2F2;

		.item {
			background: url(../../../static/card.png);
			background-size: 680upx 266upx;
			width: 681upx;
			height: 266upx;
			margin: 25upx auto 0;
			overflow: hidden;
			position: relative;

			.title {
				position: absolute;
				font-size: 30upx;
				line-height: 30upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(52, 52, 52, 1);
				top: 24upx;
				left: 40upx;
			}

			.nums {
				position: absolute;
				top: 36upx;
				right: 36upx;
				font-size: 30upx;
				line-height: 30upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(52, 52, 52, 1);
			}

			.price {
				font-size: 56upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(52, 52, 52, 1);
				position: absolute;
				top: 78upx;
				left: 78upx;
				line-height: 56upx;
			}

			.time {
				font-size: 24upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(52, 52, 52, 1);
				line-height: 38upx;
				position: absolute;
				top: 84upx;
				right: 40upx;
				text-align: center;
			}

			.threshold {
				font-size: 30upx;
				position: absolute;
				top: 196upx;
				left: 78upx;
				line-height: 30upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(52, 52, 52, 1);
			}

			.btn {
				position: absolute;
				top: 186upx;
				right: 35upx;
				width: 130upx;
				height: 50upx;
				background: rgba(254, 86, 33, 1);
				border-radius: 10upx;
				font-size: 24upx;
				line-height: 50upx;
				text-align: center;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}

			.active {
				background: #999999;
			}
		}
	}
</style>
